<script setup lang="ts">
defineOptions({
  name: 'AboutPage',
})
</script>

<template>
  <div class="about-page min-h-screen bg-base-100">
    <!-- Page Header -->
    <header class="bg-base-200 shadow-sm">
      <div class="container mx-auto px-4 py-8 sm:py-10 md:py-12">
        <h1
          class="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-4 sm:mb-6 text-base-content"
        >
          👋 关于我
        </h1>
        <p
          class="text-base sm:text-lg md:text-xl text-center text-base-content/70 max-w-2xl mx-auto px-4"
        >
          分享技术，记录生活，追求更好的自己
        </p>
      </div>
    </header>

    <div class="container mx-auto px-4 py-6 sm:py-8 md:py-12">
      <div class="max-w-4xl mx-auto">
        <!-- 个人介绍 -->
        <div class="card bg-base-200 shadow-lg mb-6 sm:mb-8">
          <div class="card-body p-4 sm:p-6 md:p-8">
            <h2 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-4 text-base-content">个人简介</h2>
            <p class="text-sm sm:text-base text-base-content/80 leading-relaxed mb-3 sm:mb-4">
              你好！我是一名热爱技术的开发者，专注于前端技术栈，喜欢探索新技术，分享开发经验。
              在这个博客中，我会记录学习过程中的思考和实践，希望能与大家一起成长。
            </p>
            <p class="text-sm sm:text-base text-base-content/80 leading-relaxed">
              除了技术分享，我也会记录一些生活感悟和读书笔记，让这个博客更加丰富多彩。
            </p>
          </div>
        </div>

        <!-- 技能栈 -->
        <div class="card bg-base-200 shadow-lg mb-6 sm:mb-8">
          <div class="card-body p-4 sm:p-6 md:p-8">
            <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-base-content">技术栈</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
              <div>
                <h3 class="text-base sm:text-lg font-semibold mb-3 text-primary">前端技术</h3>
                <div class="flex flex-wrap gap-1.5 sm:gap-2">
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Vue.js</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >React</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >TypeScript</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >JavaScript</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >CSS3</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >HTML5</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Tailwind CSS</span
                  >
                  <span class="badge badge-primary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Vite</span
                  >
                </div>
              </div>
              <div>
                <h3 class="text-base sm:text-lg font-semibold mb-3 text-secondary">后端技术</h3>
                <div class="flex flex-wrap gap-1.5 sm:gap-2">
                  <span class="badge badge-secondary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Node.js</span
                  >
                  <span class="badge badge-secondary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Express</span
                  >
                  <span class="badge badge-secondary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Go</span
                  >
                  <span class="badge badge-secondary badge-sm sm:badge-md text-xs sm:text-sm"
                    >MySQL</span
                  >
                  <span class="badge badge-secondary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Redis</span
                  >
                  <span class="badge badge-secondary badge-sm sm:badge-md text-xs sm:text-sm"
                    >Docker</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="card bg-base-200 shadow-lg">
          <div class="card-body p-4 sm:p-6 md:p-8">
            <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-base-content">联系方式</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
              <div class="flex items-center gap-2 sm:gap-3">
                <div
                  class="w-8 h-8 sm:w-10 sm:h-10 bg-primary rounded-full flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-4 h-4 sm:w-5 sm:h-5 text-primary-content"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.568 8.16c-.169 1.858-.896 3.461-2.189 4.811-1.305 1.362-2.875 2.107-4.379 2.107-.169 0-.339-.008-.508-.025-.169.017-.339.025-.508.025-1.504 0-3.074-.745-4.379-2.107-1.293-1.35-2.02-2.953-2.189-4.811-.017-.169-.025-.339-.025-.508 0-.169.008-.339.025-.508.169-1.858.896-3.461 2.189-4.811C4.926 1.491 6.496.746 8 .746c.169 0 .339.008.508.025.169-.017.339-.025.508-.025 1.504 0 3.074.745 4.379 2.107 1.293 1.35 2.02 2.953 2.189 4.811.017.169.025.339.025.508 0 .169-.008.339-.025.508z"
                    />
                  </svg>
                </div>
                <div class="min-w-0">
                  <p class="font-semibold text-base-content text-sm sm:text-base">GitHub</p>
                  <p class="text-base-content/60 text-xs sm:text-sm truncate">
                    github.com/username
                  </p>
                </div>
              </div>
              <div class="flex items-center gap-2 sm:gap-3">
                <div
                  class="w-8 h-8 sm:w-10 sm:h-10 bg-secondary rounded-full flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-4 h-4 sm:w-5 sm:h-5 text-secondary-content"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
                    />
                  </svg>
                </div>
                <div class="min-w-0">
                  <p class="font-semibold text-base-content text-sm sm:text-base">Twitter</p>
                  <p class="text-base-content/60 text-xs sm:text-sm truncate">@username</p>
                </div>
              </div>
              <div class="flex items-center gap-2 sm:gap-3">
                <div
                  class="w-8 h-8 sm:w-10 sm:h-10 bg-accent rounded-full flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-4 h-4 sm:w-5 sm:h-5 text-accent-content"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                    />
                  </svg>
                </div>
                <div class="min-w-0">
                  <p class="font-semibold text-base-content text-sm sm:text-base">邮箱</p>
                  <p class="text-base-content/60 text-xs sm:text-sm truncate">
                    contact@example.com
                  </p>
                </div>
              </div>
              <div class="flex items-center gap-2 sm:gap-3">
                <div
                  class="w-8 h-8 sm:w-10 sm:h-10 bg-info rounded-full flex items-center justify-center flex-shrink-0"
                >
                  <svg
                    class="w-4 h-4 sm:w-5 sm:h-5 text-info-content"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-17v2h2V5h-2zm0 4v8h2V9h-2z"
                    />
                  </svg>
                </div>
                <div class="min-w-0">
                  <p class="font-semibold text-base-content text-sm sm:text-base">微信</p>
                  <p class="text-base-content/60 text-xs sm:text-sm truncate">wechat_id</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义样式 */
</style>
